<!--
 * @Author: 王灿
 * @Date: 2019-11-26 20:43:08
 * @LastEditTime: 2019-12-12 19:30:58
 * @Description: 轮播图操作
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-carousel\carousel-operate\index.vue
 -->
 <template>
  <div>
    <el-form :model="ruleForm" ref="ruleForm">
      <!-- 选择类型 -->
      <el-form-item prop="skuId" style="margin: 15px 0;">
        <el-select
          v-model="ruleForm.type"
          clearable
          placeholder="选择类型"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 选择商品 -->
      <el-form-item prop="productId" style="margin-bottom: 15px;">
        <el-select
          v-model="ruleForm.productId"
          filterable
          remote
          reserve-keyword
          clearable
          placeholder="跳转商品"
          :remote-method="onGetCommodity"
        >
          <el-option
            v-for="item in productList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 上传组件 -->
      <el-form-item>
        <jq-upload :upData="picObj" :fileList="fileList" @onChangeImageKey="onChangeImageKey" />
      </el-form-item>
      <el-form-item>
        <!-- 富文本 -->
        <div class="el-form__quill">
          <jq-tinymce
            ref="editor"
            v-model="ruleForm.details"
            :isUpdate="isUpdate"
            :minHeight="200"
            @input="onGetEditorValue"
          />
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import JqUpload from '@/components/jq-upload/index.vue'
import JqTinymce from '@/components/jq-tinymce/index.vue'
import { getRotationAdd, getRotationUpdate } from '@/api/home.js'
import { getProductList } from '@/api/commodity.js'
export default {
  name: 'CarouselOperate',
  components: { JqUpload, JqTinymce},
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 图片数组
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        pic: '',
        details: '',
        productId: '',
        type: ''
      },
      picObj: {
        label: '轮播图',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 1,
        type: 1,
        isImage: true
      },
      isUpdate: false,
      typeOptions: [
        {label: '商品跳转', value: 0},
        {label: '嘉鹊健康跳转',  value: 1}
      ],
      productList: []
    }
  },
  watch: {
    // 获取默认数据
    row() {
      this.isUpdate = false
      this.onGetRow()
      this.onGetCommodity()
    }
  },
  created() {
    this.onGetRow()
    this.onGetCommodity()
  },
  methods: {
    // 默认数据
    onGetRow() {
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm.id = boolean ? this.row.id : ''
      this.ruleForm.pic = boolean ? this.row.pic : ''
      this.ruleForm.details = boolean ? this.row.details : ''
      this.ruleForm.type = boolean ? this.row.type : ''
      this.ruleForm.productId = boolean ? this.row.productId : ''
    },
    // 获取所有商品
    onGetCommodity(query) {
      this.productList = []
      getProductList({
        name: query || ''
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.name
          this.productList.push(params)
        })
      })
    },
    // 赋值富文本
    onGetEditorValue(data) {
      this.isUpdate = true
      this.ruleForm.details = data
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      this.ruleForm.pic = fileName
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            // 编辑
            getRotationUpdate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getRotationAdd(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form__quill {
    width: 100%;
    margin-top: 10px;
}
</style>
